<template>
	<!-- 员工申请 -->
	<view class="form-page" v-if="staffinfo == null">
		<view class="form-title">商务代理申请</view>
		<view class="form-item">
			<text>头像</text>
			<view class="upload-box">
				<view v-if="form.staff_avatar" class="img-wrap">
					<image :src="web_url + form.staff_avatar" mode="aspectFill" class="img"></image>
					<view class="delete-btn" @click="form.staff_avatar = ''">×</view>
				</view>
				<view v-else class="add-btn" @click="chooseImage('staff_avatar')">+</view>
			</view>
		</view>
		<view class="form-item">
			<text>身份证正面（必传）</text>
			<view class="upload-box">
				<view v-if="form.idcard_front" class="img-wrap">
					<image :src="web_url + form.idcard_front" mode="aspectFill" class="img"></image>
					<view class="delete-btn" @click="form.idcard_front = ''">×</view>
				</view>
				<view v-else class="add-btn" @click="chooseImage('idcard_front')">+</view>
			</view>
		</view>

		<view class="form-item">
			<text>身份证背面（必传）</text>
			<view class="upload-box">
				<view v-if="form.idcard_back" class="img-wrap">
					<image :src="web_url + form.idcard_back" mode="aspectFill" class="img"></image>
					<view class="delete-btn" @click="form.idcard_back = ''">×</view>
				</view>
				<view v-else class="add-btn" @click="chooseImage('idcard_back')">+</view>
			</view>
		</view>

		<view class="form-item">
			<text>资格证书照片</text>
			<view class="upload-box">
				<view v-if="form.cert_image" class="img-wrap">
					<image :src="web_url + form.cert_image" mode="aspectFill" class="img" />
					<view class="delete-btn" @click="form.cert_image = ''">×</view>
				</view>
				<view v-else class="add-btn" @click="chooseImage('cert_image')">+</view>
			</view>
		</view>

		<view class="form-item"><text>姓名（必填）</text><input v-model="form.name" placeholder="请输入姓名" /></view>
		<view class="form-item"><text>电话（必填）</text><input v-model="form.phone" placeholder="请输入电话" type="number" disabled="true"/></view>

		<view class="form-item">
			<text>性别</text>
			<picker :range="sexOptions" :value="form.sex" @change="e => form.sex = e.detail.value">
				<view class="picker">{{ sexOptions[form.sex] }}</view>
			</picker>
		</view>

		<view class="form-item"><text>年龄</text><input v-model="form.age" placeholder="请输入年龄" type="number" /></view>
		<view class="form-item"><text>个人优势分析</text><input v-model="form.advantage" placeholder="请输入个人优势分析" /></view>
		<view class="form-item"><text>工作经历</text><textarea v-model="form.work_exp" placeholder="请输入工作经历" /></view>
		<view class="form-item"><text>教育经历</text><textarea v-model="form.edu_exp" placeholder="请输入教育经历" /></view>

		<view class="form-item">
			<text>申请区域（必选）</text>
			<picker :range="areaNames" :value="areaIndex" @change="onAreaChange">
				<view class="picker">
					{{ areaNames.length > 0 ? areaNames[areaIndex] : '请选择区域' }}
				</view>
			</picker>
		</view>

		<button class="form-btn" @click="submit">提交申请</button>
	</view>
	
	
	
	
	
	
	<!-- 审核中 -->
	<view  v-else-if="staffinfo != null&&staffinfo.state==1">
		<view class="form-title" style="color:#fff;margin: 0px;font-size:32rpx;padding:10rpx 0px;background:#FFCF00;">审核中</view>
		<view class="form-page">
			
			<view class="form-item">
				<text>身份证照片（正面）</text>
				<view class="upload-box">
					<view v-if="staffinfo.idcard_add" class="img-wrap">
						<image :src="web_url + staffinfo.idcard_add" mode="aspectFill" class="img"></image>
						<!-- <view class="delete-btn" @click="staffinfo.idcard_front = ''">×</view> -->
					</view>
					<!-- <view v-else class="add-btn" @click="chooseImage('idcard_front')">+</view> -->
				</view>
			</view>
		
			<view class="form-item">
				<text>身份证照片（背面）</text>
				<view class="upload-box">
					<view v-if="staffinfo.idcard_cut" class="img-wrap">
						<image :src="web_url + staffinfo.idcard_cut" mode="aspectFill" class="img"></image>
						<!-- <view class="delete-btn" @click="staffinfo.idcard_back = ''">×</view> -->
					</view>
					<!-- <view v-else class="add-btn" @click="chooseImage('idcard_back')">+</view> -->
				</view>
			</view>
		
			<view class="form-item">
				<text>资格证书照片</text>
				<view class="upload-box">
					<view v-if="staffinfo.prove_images" class="img-wrap">
						<image :src="web_url + staffinfo.prove_images" mode="aspectFill" class="img" />
						<!-- <view class="delete-btn" @click="form.cert_image = ''">×</view> -->
					</view>
					<!-- <view v-else class="add-btn" @click="chooseImage('cert_image')">+</view> -->
				</view>
			</view>
		
			<view class="form-item"><text>姓名</text><input v-model="staffinfo.staff_name" placeholder="请输入姓名" disabled="true"/></view>
			<view class="form-item"><text>电话</text><input v-model="staffinfo.staff_mobile" placeholder="请输入电话" type="number" disabled="true"/></view>
		
			<view class="form-item">
				<text>性别</text>
				<!-- <picker :range="sexOptions" :value="staffinfo.sex" @change="e => staffinfo.sex = e.detail.value"> -->
					<view class="picker">{{staffinfo.staff_sex=='male'?'男':'女'}}</view>
				<!-- </picker> -->
			</view>
		
		<view class="form-item"><text>年龄</text><input v-model="staffinfo.staff_age" placeholder="请输入年龄" type="number" disabled="true"/></view>
		<view class="form-item"><text>个人优势分析</text><input v-model="staffinfo.staff_info" placeholder="请输入个人优势分析" disabled="true"/></view>
		<view class="form-item"><text>工作经历</text><textarea v-model="staffinfo.work" placeholder="请输入工作经历" disabled="true"/></view>
		<view class="form-item"><text>教育经历</text><textarea v-model="staffinfo.teach" placeholder="请输入教育经历" disabled="true"/></view>
			
			<view class="form-item">
				<text>申请区域</text>
				<!-- <picker :range="areaNames" :value="areaIndex" @change="onAreaChange"> -->
					<view class="picker">
						{{ staffinfo.area_name }}
					</view>
				<!-- </picker> -->
			</view>
		
			<button class="form-btn" @click="cxshenqing">信息填写有误，重新提交</button>
		</view>
	</view>
	
	
	
	<!-- 审核已驳回 -->
	<view  v-else-if="staffinfo != null&&staffinfo.state==3">
		<view class="form-title" style="color:#fff;margin: 0px;font-size:32rpx;padding:10rpx 0px;background:red;" @click="cxshenqing">审核已驳回，请重新提交</view>
		<view class="form-title" style="margin: 0px;background-color: #181818;font-size: 24rpx;padding: 5px 0px;">驳回原因：{{ staffinfo.reason }}</view>
		<view class="form-page">
			
			<view class="form-item">
				<text>身份证照片（正面）</text>
				<view class="upload-box">
					<view v-if="staffinfo.idcard_add" class="img-wrap">
						<image :src="web_url + staffinfo.idcard_add" mode="aspectFill" class="img"></image>
						<!-- <view class="delete-btn" @click="staffinfo.idcard_front = ''">×</view> -->
					</view>
					<!-- <view v-else class="add-btn" @click="chooseImage('idcard_front')">+</view> -->
				</view>
			</view>
		
			<view class="form-item">
				<text>身份证照片（背面）</text>
				<view class="upload-box">
					<view v-if="staffinfo.idcard_cut" class="img-wrap">
						<image :src="web_url + staffinfo.idcard_cut" mode="aspectFill" class="img"></image>
						<!-- <view class="delete-btn" @click="staffinfo.idcard_back = ''">×</view> -->
					</view>
					<!-- <view v-else class="add-btn" @click="chooseImage('idcard_back')">+</view> -->
				</view>
			</view>
		
			<view class="form-item">
				<text>资格证书照片</text>
				<view class="upload-box">
					<view v-if="staffinfo.prove_images" class="img-wrap">
						<image :src="web_url + staffinfo.prove_images" mode="aspectFill" class="img" />
						<!-- <view class="delete-btn" @click="form.cert_image = ''">×</view> -->
					</view>
					<!-- <view v-else class="add-btn" @click="chooseImage('cert_image')">+</view> -->
				</view>
			</view>
		
			<view class="form-item"><text>姓名</text><input v-model="staffinfo.staff_name" placeholder="请输入姓名" disabled="true"/></view>
			<view class="form-item"><text>电话</text><input v-model="staffinfo.staff_mobile" placeholder="请输入电话" type="number" disabled="true"/></view>
		
			<view class="form-item">
				<text>性别</text>
				<!-- <picker :range="sexOptions" :value="staffinfo.sex" @change="e => staffinfo.sex = e.detail.value"> -->
					<view class="picker">{{staffinfo.staff_sex=='male'?'男':'女'}}</view>
				<!-- </picker> -->
			</view>
		
		<view class="form-item"><text>年龄</text><input v-model="staffinfo.staff_age" placeholder="请输入年龄" type="number" disabled="true"/></view>
		<view class="form-item"><text>个人优势分析</text><input v-model="staffinfo.staff_info" placeholder="请输入个人优势分析" disabled="true"/></view>
		<view class="form-item"><text>工作经历</text><textarea v-model="staffinfo.work" placeholder="请输入工作经历" disabled="true"/></view>
		<view class="form-item"><text>教育经历</text><textarea v-model="staffinfo.teach" placeholder="请输入教育经历" disabled="true"/></view>
			
			<view class="form-item">
				<text>申请区域</text>
				<!-- <picker :range="areaNames" :value="areaIndex" @change="onAreaChange"> -->
					<view class="picker">
						{{ staffinfo.area_name }}
					</view>
				<!-- </picker> -->
			</view>
		
		<button class="form-btn" @click="cxshenqing" style="background-color: red;color: #fff;">审核已驳回，重新提交</button>
		</view>
	</view>
	
</template>

<script>
import uploads from "@/util/upload.js";
const webConfig = require("@/util/config");

export default {
	data() {
		return {
			sexOptions: ['男', '女'],
			form: {
				idcard_front: '',
				idcard_back: '',
				name: '',
				phone: '',
				age: '',
				sex: 0,
				advantage: '',
				work_exp: '',
				edu_exp: '',
				cert_image: '',
				staff_avatar: '',
				area: '' // 存区域id
			},
			staffinfo:null,
			web_url: '',
			areaList: [],        // 区域对象数组
			areaNames: [],       // 区域名称数组
			areaIndex: 0,        // 当前picker选中的索引
		};
	},
	onLoad() {
		this.web_url = webConfig.base_url || '';
		this.getArealist();
		this.getUserInfo();
	},
	methods: {
		getArealist() {
			this.$http({
				url: '/addons/xilufitness/staff/arealist'
			}).then(res => {
				this.areaList = res.data.list || [];
				this.areaNames = this.areaList.map(item => item.area_name);
				if (this.areaList.length > 0) {
					this.areaIndex = 0;
					this.form.area = this.areaList[0].id; // 默认选第一个
				}
			}).catch(err => {
				uni.showToast({
					title: err.msg || '区域获取失败',
					icon: 'none'
				});
			});
		},
		
		getUserInfo() {
			let _this = this;
			this.$http({
				url: '/addons/xilufitness/user/index',
				method: 'get'
			}).then(res => {
				if (res.code == 1) {
					_this.form.phone = res.data.info.mobile;
					_this.staffinfo = res.data.info.staffinfo;
					// _this.coachinfo.prove_images=_this.coachinfo.prove_images.split(",");
					// _this.coachinfo.teach_images=_this.coachinfo.teach_images.split(",");
					// _this.coachinfo.teach_videos=_this.coachinfo.teach_videos.split(",");
				} 
			}).catch(error => {
				console.log('userError', error);
			})
		},
		onAreaChange(e) {
			this.areaIndex = e.detail.value;
			this.form.area = this.areaList[this.areaIndex].id;
		},
		chooseImage(field) {
			let _this = this;
			uni.chooseImage({
				count: 1,
				success(res) {
					let tempPath = res.tempFilePaths[0];
					uni.showLoading({
						title: '上传中'
					});
					uploads.uploadFile(tempPath, function(uploadRes) {
						uni.hideLoading();
						if (uploadRes.code == 1) {
							_this.form[field] = uploadRes.data.url;
						} else {
							uni.showToast({
								title: uploadRes.msg || '上传失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		
		//重新提交申请
		cxshenqing() {
			this.staffinfo = null;
		},
		//提交申请
		submit() {
			if (!this.form.name){
				uni.showToast({
					title: '请填写姓名',
					icon: 'none'
				});
				return;
			}
			if (!this.form.phone){
				uni.showToast({
					title: '请填写电话',
					icon: 'none'
				});
				return;
			}
			if (!this.form.idcard_front){
				uni.showToast({
					title: '请上传身份证正面照片',
					icon: 'none'
				});
				return;
			}
			if (!this.form.idcard_back){
				uni.showToast({
					title: '请上传身份证背面照片',
					icon: 'none'
				});
				return;
			}
			if (!this.form.area){
				uni.showToast({
					title: '请选择申请区域',
					icon: 'none'
				});
				return;
			}
			

			const sexText = this.sexOptions[this.form.sex];
			const sexValue = sexText === '男' ? 'male' : 'female';
			let _this = this
			this.$http({
				url: '/addons/xilufitness/staff/apply',
				method: 'POST',
				data: {
					staff_name: this.form.name,
					staff_mobile: this.form.phone,
					staff_age: this.form.age,
					staff_sex: sexValue,
					idcard_add: this.form.idcard_front,
					idcard_cut: this.form.idcard_back,
					staff_info: this.form.advantage,
					staff_avatar: this.form.staff_avatar,
					work: this.form.work_exp,
					teach: this.form.edu_exp,
					prove_images: this.form.cert_image,
					area_id: this.form.area // 这里是区域id
				}
			}).then(res => {
				let code = res.code
				uni.showToast({
					title: res.msg,
					icon: 'success',
					duration: 3000,
					success() {
						console.log(code);
						console.log(_this.$api);
						if (code == 1) {
							_this.$api.navigate("../mine/mine")
						}
					}
				});
			}).catch(err => {
				uni.showToast({
					title: err.msg || '提交失败',
					icon: 'none'
				});
			});
		}
	}
};
</script>

<style scoped>
.form-page {
	background-color: #E8EEFE;
	min-height: 100vh;
	padding: 30rpx;
	color: #fff;
	box-sizing: border-box;
}
.form-title {
	font-size: 36rpx;
	color: #FFCF00;
	margin-bottom: 30rpx;
	font-weight: bold;
	text-align: center;
}
.form-item {
	margin-bottom: 28rpx;
	color: #ccc;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}
.form-item text {
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
}
input:focus,
textarea:focus {
	border-color: #FFCF00;
	outline: none;
}
input,
textarea {
	background-color: #fff;
	color: #333;
	border: 1px solid #E8EEFE;
	border-radius: 12rpx;
	width: 92%;
	padding: 24rpx;
	font-size: 28rpx;
	box-sizing: content-box;
	transition: 0.2s;
}
textarea {
	height: auto;
	min-height: 100rpx;
	line-height: 1.5;
	padding: 20rpx;
	resize: none;
}
.picker {
	background-color: #fff;
	color: #333;
	border: 1px solid transparent;
	border-radius: 12rpx;
	padding: 18rpx 20rpx;
	font-size: 28rpx;
	width: 92%;
	box-sizing: content-box;
	user-select: none;
	transition: 0.2s;
}
.picker:active {
	border-color: #FFCF00;
}
.upload-box {
	display: flex;
	align-items: center;
	gap: 20rpx;
	flex-wrap: nowrap;
}
.img-wrap {
	position: relative;
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx;
	overflow: hidden;
	flex-shrink: 0;
}
.img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12rpx;
}
.delete-btn {
	position: absolute;
	top: 6rpx;
	right: 6rpx;
	width: 36rpx;
	height: 36rpx;
	line-height: 36rpx;
	text-align: center;
	background: rgba(229, 83, 83, 0.85);
	color: #fff;
	border-radius: 50%;
	font-size: 28rpx;
	cursor: pointer;
	user-select: none;
	box-shadow: 0 0 6rpx rgba(229, 83, 83, 0.9);
	transition: background-color 0.3s ease;
}
.delete-btn:hover {
	background: rgba(212, 61, 61, 0.95);
}
.add-btn {
	width: 160rpx;
	height: 160rpx;
	background-color: #fff;
	color: #999;
	font-size: 80rpx;
	text-align: center;
	line-height: 160rpx;
	border-radius: 12rpx;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.3s ease;
}
.add-btn:hover {
	background-color: #444;
}
.form-btn {
	background-color: #FFCF00;
	color: #181818;
	border-radius: 16rpx;
	font-size: 32rpx;
	width: 90%;
	margin: 60rpx auto 0;
	display: block;
	text-align: center;
	padding: 22rpx 0;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
	transition: 0.2s;
	user-select: none;
}
.form-btn:active {
	transform: scale(0.96);
	opacity: 0.8;
}
</style>